<template>
  <el-container>
    <el-header>
    <el-form :inline="true" :model="form">
      <el-form-item label="项目年份">
        <el-select v-model="form.year" placeholder="全部">
          <el-option :label="year" :value="year" :key="y" v-for="(year,y) in summary.yearList"></el-option>
        </el-select>
      </el-form-item>

       <el-form-item label="公司">
           <el-select v-model="form.company_id" placeholder="公司名称" @change="getList" clearable filterable>
              <el-option :label="company" :value="c" :key="c" v-for="(company,c) in summary.companyList"></el-option>
            </el-select>
       </el-form-item>

      <el-form-item label="事业部">
           <el-select v-model="form.dept_id" placeholder="事业部" @change="getList" clearable filterable>
              <el-option :label="deptname" :value="k" :key="k" v-for="(deptname,k) in summary.deptList"></el-option>
            </el-select>
      </el-form-item>

      <el-form-item label="负责人">
          <el-select v-model="form.uid" placeholder="负责人" @change="getList" clearable filterable>
              <el-option :label="staff" :value="u" :key="u" v-for="(staff,u) in summary.staffList"></el-option>
          </el-select>
      </el-form-item>

      <el-form-item label="客户">
          <el-select v-model="form.customer_id" placeholder="客户名称" clearable filterable @change="getList">
              <el-option :label="kh" :value="cid" :key="cid" v-for="(kh,cid) in summary.customerList"></el-option>
            </el-select>
      </el-form-item>

    </el-form>
    </el-header>

    <el-main>
      <el-table
        :data="summary.list"
        :summary-method="getSummaries"
        show-summary
      >
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="活动时间" prop="ystime"></el-table-column>
        <el-table-column label="项目编号" prop="batch_id"></el-table-column>

        <el-table-column  align="left" header-align="center" width="200px">
          <template slot="header" slot-scope="scope">
            <el-select v-model="form.xmid" placeholder="项目名称" @change="getList" clearable filterable>
              <el-option :label="name" :value="id" v-for="(name,id) in summary.projectList" :key="id"></el-option>
            </el-select>
          </template>
          <template slot-scope="scope">
            {{scope.row.name}}
          </template>
        </el-table-column>
        <el-table-column align="left" header-align="center" width="200px">
          <template slot="header" slot-scope="scope">
            <el-select v-model="form.company_id" placeholder="公司名称" @change="getList" clearable filterable>
              <el-option :label="company" :value="c" :key="c" v-for="(company,c) in summary.companyList"></el-option>
            </el-select>
          </template>
          <template slot-scope="scope">
            {{scope.row.company}}
          </template>
        </el-table-column>

        <el-table-column align="left" header-align="center" width="200px">
          <template slot="header" slot-scope="scope">
            <el-select v-model="form.dept_id" placeholder="事业部" @change="getList" clearable filterable>
              <el-option :label="deptname" :value="k" :key="k" v-for="(deptname,k) in summary.deptList"></el-option>
            </el-select>
          </template>
            <template slot-scope="scope">
              {{scope.row.dept}}
            </template>
        </el-table-column>

        <el-table-column align="left" header-align="center" width="120px">
          <template slot="header" slot-scope="scope">
            <el-select v-model="form.uid" placeholder="负责人" @change="getList" clearable filterable>
              <el-option :label="staff" :value="u" :key="u" v-for="(staff,u) in summary.staffList"></el-option>
            </el-select>
          </template>
          <template slot-scope="scope">
            {{scope.row.username}}
          </template>
        </el-table-column>

        <el-table-column align="left" header-align="center" width="200px">
          <template slot="header" slot-scope="scope">
            <el-select v-model="form.customer_id" placeholder="客户名称" clearable filterable @change="getList">
              <el-option :label="kh" :value="cid" :key="cid" v-for="(kh,cid) in summary.customerList"></el-option>
            </el-select>
          </template>

            <template slot-scope="scope">
              {{scope.row.customer}}
            </template>

        </el-table-column>

        <template v-if="!isLx">
          <el-table-column label="预算金额" prop="ysmoney"></el-table-column>
          <el-table-column label="结算金额" prop="jsmoney"></el-table-column>
          <el-table-column label="税率(%)" prop="tax"></el-table-column>
          <el-table-column label="成本合计" prop="cbmoney"></el-table-column>
          <el-table-column label="利润金额" prop="lrmoney"></el-table-column>
          <el-table-column label="利润率(%)" prop="lrl"></el-table-column>
          <el-table-column label="待付金额" prop="waitMoney"></el-table-column>
          <el-table-column label="已付金额" prop="yfMoney"></el-table-column>
          <el-table-column label="发票金额" prop="fpMoney"></el-table-column>
          <el-table-column label="收款金额" prop="skMoney"></el-table-column>

          <el-table-column label="操作"  fixed="right">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="getDetail(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </template>

        <template v-else>
          <el-table-column label="预算">
            <template slot-scope="scope">
              <i class="el-icon-check success" v-if="scope.row.is_ys"></i>
              <i class="el-icon-close err" v-else></i>
            </template>

          </el-table-column>
          <el-table-column label="结算">
            <template slot-scope="scope">
              <i class="el-icon-check success" v-if="scope.row.is_js"></i>
              <i class="el-icon-close err" v-else></i>
            </template>

          </el-table-column>
        </template>

      </el-table>
    </el-main>
    <el-footer>
      <!--    分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="form.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="summary.total">
      </el-pagination>

    </el-footer>
  </el-container>
</template>

<script>
  import {mapState,mapActions} from "vuex"
    export default {
        name: "summaryQuery",
        data(){
            return {
                form: {
                    year: '',
                    company_id: '',
                    dept_id: '',
                    uid: '',
                    customer_id: '',
                    page: 1,
                    page_size: 10,
                    xmid: '',
                }
            }
        },
        props:["isLx"],
        computed: {
            ...mapState("ProjectData",["summary"]),
        },
        methods: {
            ...mapActions("ProjectData",["getSummaryDataActions"]),
            getList(){
                this.getSummaryDataActions(this.form)
            },
            handleSizeChange(pageSize){
                this.form.page_size = pageSize
                this.getList()
            },
            handleCurrentChange(page){
                this.form.page = page
                this.getList()
            },
            getDetail(row){
                this.$router.push({
                    path: '/summary_detail',
                    query:{
                        id: row.id,
                        name: row.name
                    },
                })
            },
            //总计
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '合计';
                        return;
                    }
                    const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        //sums[index] += '';
                    } else {
                        sums[index] = 'N/A';
                    }
                });

                return sums;
            }

        },

    }
</script>

<style scoped>
.success{
  color:green;
}
  .err{
    color: red;
  }
</style>
